import React, { useState ,useEffect } from "react"
import styles from "./projectKu.less"
import classNames from 'classnames';
import useStore from "@/context/useStore"
import {observer} from "mobx-react-lite"
import {IindustryQuery , ImajorQuery , ImajorQueryChild , IprojectList,IprojectListParams} from "@/utils/interface"
import {getProjectku} from '@/services/index'
import { Input , Pagination } from "antd"
import { SearchOutlined } from '@ant-design/icons';

const trainingType=['全部','生产实训','教学实训','专业群实训']
const sortlist=['综合','最新','最热']
const isSxType=['','','教学实训','专业群实训']


const ProjectKu:React.FC=()=>{

    let [curTypeing, setCurTypeing] = useState(0)
    let [curSkill,setCurSkill]=useState('')
    let [curMajor,setCurMajor]=useState('')
    let [curName,setCurName]=useState('')
    let [title, setTitle] = useState('');
    let [sortType,setSortType]=useState(0)
    let [datalist, setDatalist] = useState<IprojectList[]>([])
    let queryParams:IprojectListParams = { isAsc: 'desc', orderByColumn: 'project.stucount', pageNum: 1, pageSize: 20, proName: '' ,proType: "",specialtyTag: "",industryTag: ''};

    let {projectKu}=useStore()

    useEffect(() => {
        projectKu.getIndustry()
        projectKu.getMajor()
    }, [])
    // console.log(projectKu.Industrylist[0].label);

    useEffect(()=>{
        let newqueryParams:IprojectListParams = queryParams as IprojectListParams
        // console.log(newqueryParams,2222);

        if(curTypeing){
            newqueryParams = {...newqueryParams,proType:String(curTypeing),industryTag:String(curMajor),specialtyTag:String(curSkill)}
        }else if(curMajor){
            newqueryParams = {...newqueryParams,industryTag:String(curMajor),proType:String(curTypeing),specialtyTag:String(curSkill)}
        }else if(curSkill){
            newqueryParams = {...newqueryParams,specialtyTag:String(curSkill),proType:String(curTypeing),industryTag:String(curMajor),}
        }else if(curName){
            console.log(curName,222);
            
            newqueryParams = {...newqueryParams,specialtyTag:String(curSkill),proType:String(curTypeing),industryTag:String(curMajor),proName:String(curName)}
        }else{
            newqueryParams = {...newqueryParams}
        }

        getProjectku(newqueryParams).then((res)=>{
            // console.log(res);
            if(res.code === 200){
                setDatalist(res.rows)
            }
        })
    },[curTypeing,curMajor,curSkill,curName,sortType])
    // console.log(datalist,'datalist');
    

    return <div className={styles.projectku}>
        {/* 导航区 */}
        <div className={styles.tags}>
            <div className={styles.more_search}>
                <div className={styles.content}>
                    {/* 实训类型 */}
                    <div className={styles.training_type}>
                        <span>实训类型:</span>
                        <div>
                            {
                                trainingType.map((item,index)=>{
                                    return <span key={item} className={index === curTypeing ? classNames(styles.active) : ''} onClick={e => setCurTypeing(index)}>{item}</span>
                                })
                            }
                        </div>
                    </div>
                    {/* 专业 */}
                    <div className={styles.major}>
                        <span>专业:</span>
                        <div>
                            {
                                [{label:'全部'},...projectKu.Majorlist].map((item:any)=>{
                                    return <span className={item.value === curMajor ? classNames(styles.active) : ''} onClick={e => setCurMajor(item.value)} key={item.value}>{item.label}</span>
                                })
                            }
                        </div>
                    </div>
                    {/* 行业 */}
                    <div className={styles.industry}>
                        <span>行业:</span>
                        <div>
                            {
                                [{label:'全部'},...projectKu.Industrylist].map((item:any)=>{
                                    return <span className={item.value === curSkill ? classNames(styles.active) : ''} onClick={e => setCurSkill(item.value)} key={item.value}>{item.label}</span>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/* 项目内容区 */}
        <div className={styles.projectt}>
            {/* //内容排序搜索 */}
            <div className={styles.project_list}>
                <div className={styles.sortlist}>
                    {
                        sortlist.map((item,index)=>{
                            return <span className={index === sortType ? classNames(styles.active) : ''} onClick={ e=>{setSortType(index)}}>{item}</span>
                        })
                    }
                </div>
                <Input style={{width:'210px',height:'35px'}} className={styles.input} placeholder="搜索岗位" suffix={<SearchOutlined onClick={()=>curName(title)}/>} value={title} onChange={e=>setCurName(e.target.value)} onKeyDown={e=>{
                    if (e.keyCode === 13){
                        setCurName(title)
                    }
                }}/>
            </div>
            {/* 项目列表 */}
            <div className={styles.plat}>
                {
                    datalist.map((item)=>{
                        return <div key={item.id} className={styles.lis}>
                            <div className={styles.lis_img}>
                                <img src={`http://111.203.59.61:8060${item.pictureUrl}`} alt=""/>
                                <div className={styles.lis_smallimg}>
                                    <img src="" alt=""/>
                                </div>
                            </div>
                            <div className={styles.lis_cen}>
                                <div className={styles.lis_cencen}>
                                    <span>{item.name}</span>
                                </div>
                                <div className={styles.lis_centext}>
                                    <div className={styles.centext_left}>
                                        <div>
                                            <img src="" alt=""/>
                                            <span>{item.stuCount}</span>
                                        </div>
                                        <div>
                                            <img src="" alt=""/>
                                            <span>{item.favorCount}</span>
                                        </div>
                                    </div>
                                    <div className={styles.centext_right}>
                                        <span className={Number(item.sxType) == 2?styles.tap2:styles.tap3}>{isSxType[Number(item.sxType)]}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    })
                }
            </div>
            <div className={styles.page}>
                <Pagination defaultCurrent={1} total={10} />
            </div>
        </div>
    </div>
}

export default observer(ProjectKu)
